<template>
    <div>
        <header>
            <i class="iconfont">&#xe64e;</i>
            <span>美食</span>
        </header>
        <nav>
            <a>分类</a>
            <a>排序</a>
            <a>筛选</a>
        </nav>
        <ul>
            <router-link class="aaa" :key="index" v-for="(item,index) in list" :to="'/detail/commodity?id='+item.id">
            <li>
                <div class="listleft">
                    <img :src="item.image_path" />
                </div>
                <div class="listright">
                    <p>
                        <span>品牌</span>
                        <span>{{item.name}}</span>
                    </p>
                    <p>
                        <span>{{item.rating}}</span>
                        <span>月销售{{item.recent_order_num}}单</span>
                    </p>
                    <p>
                        <span>¥{{item.piecewise_agent_fee.rules[0].price}}元起送/{{item.piecewise_agent_fee.description
}}</span>
                        <span>{{item.distance/1000}}千米/{{item.float_minimum_order_amount}}分钟</span>
                    </p>
                    <hr/>
                    <p>
                        <span>
                            <p><a>新</a>新用户下单立减27元</p>
                            <p><a>减</a>满25减20，满35减15</p>
                        </span>
                    </p>
                </div>
            </li>
            </router-link>
        </ul>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    data() {
        return {
            list: []

        }
    },
    created() {
        var that = this;
        axios.get('http://localhost:3000/list').then(function (res) {
            var arr = res.data;
            that.list=arr;
            console.log(res.data)
            arr.map(function (item, index) {
                var a = item.image_path.split('');
                a.splice(1, 0, '/');
                a.splice(4, 0, '/');
                if (a.join('').indexOf('jpeg') != -1) {
                    item.image_path = 'https://fuss10.elemecdn.com/' + a.join('') + '.jpeg?imageMogr/format/webp/thumbnail/!120x120r/gravity/Center/crop/120x120/';
                } else {
                    item.image_path = 'https://fuss10.elemecdn.com/' + a.join('') + '.png?imageMogr/format/webp/thumbnail/!120x120r/gravity/Center/crop/120x120/';
                }
            })

        }).catch(function (err) {
            console.log(err)
        })


    }
}
</script>
<style lang="scss" scoped>
@import '../../static/hotcss/px2rem.scss';
.aaa{
    color: #666;
}
header {
    background: #0085ff;
    height: px2rem(88);
    width: 100%;
    i {
        color: #fff;
        font-size: px2rem(38);
    }
    span {

        text-align: center;
        color: #fff;
        line-height: px2rem(88);
        font-size: px2rem(40);
        margin-left: px2rem(280);
    }
    position: fixed;
    top:0;
}

nav {
    height: px2rem(79);
    border-bottom: 1px solid #ccc;
    display: flex;
    width: 100%;
    position: fixed;
    top: px2rem(88);
    background: #fff;
    a {
        flex: 1;
        text-align: center;
        font-size: px2rem(28);
        line-height: px2rem(79);
    }
}

ul {
    margin-top: px2rem(167);
    
    li {
        height: px2rem(273);
        border-bottom: 1px solid #ccc;
        padding: px2rem(30) 0;
        .listleft {
            width: px2rem(120);
            height: px2rem(120);
            float: left;
            padding-left: px2rem(20);
            padding-right: px2rem(20);
        }
        .listright {
            height: px2rem(214);
            float: left;
            width: px2rem(560);
            margin-left: px2rem(40);
            p:nth-child(1) {
                height: px2rem(40);
                span:nth-child(1) {
                    display: inline-block;
                    color: red;
                    float: left;
                    font-size: px2rem(28);
                    background: #ffd930;
                    color: #000;
                    padding: 3px;
                    border-radius: px2rem(8);
                    line-height: px2rem(36);
                }
                span:nth-child(2) {
                    font-size: px2rem(33);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    line-height: px2rem(36);
                    float: left;
                    width: px2rem(400);
                }
            }
            p:nth-child(2) {
                height: px2rem(26);
                span:nth-child(1) {
                    color: #ff6000;
                    font-size: px2rem(25);
                    float: left;
                }
                span:nth-child(2) {
                    font-size: px2rem(28);
                    float: left;
                }
            }
            p:nth-child(3) {
                margin-top: px2rem(20);
                height: px2rem(40);
                margin-bottom: px2rem(10);
                span:nth-child(1) {
                    float: left;
                    font-size: px2rem(28);
                }
                span:nth-child(2) {
                    float: right;
                    font-size: px2rem(28);
                }
            }
            hr{
                margin-bottom: px2rem(10);
            }
            p:nth-child(5) {
                span {
                    font-size: px2rem(28);
                    color: #ccc;
                    a {
                        background: rgb(112, 188, 70);
                        font-size: px2rem(26);
                        color: #fff;
                        padding: px2rem(3);
                        border-radius: px2rem(10);
                        margin-right: px2rem(14);
                        line-height: px2rem(10);
                    }
                    p:nth-child(2){
                        a{
                            background: rgb(240, 115, 115);
                        }
                    }
                }
            }
        }
    }
}
</style>

